如何使用 JavaScript 和 React 为古腾堡编辑器创建一个简单的块

您是否想为古腾堡编辑器创建自定义块，但不确定如何做？您是否听说过 JavaScript 和 React，但不知道如何将它们实现到您的代码中？不要再观望！本文将逐步指导您如何使用 JavaScript 和 React 为古腾堡编辑器创建一个简单的块——这样您就可以自信地开始创建自定义块。

介绍

WordPress 是一种广泛使用的内容管理系统 (CMS)，彻底改变了网站的构建方式。其直观的界面和用户友好的功能使其成为网站管理员和开发人员的理想选择，他们可以轻松创建现代网站。近年来，随着 Gutenberg-editor 的开发，WordPress 为其武器库增加了新功能——一种高级块编辑器，允许用户构建交互式和灵活的网页。

但是，为 Gutenberg 编辑器创建自定义块需要 JavaScript 和 React 技术的基本知识，一开始可能会让人望而生畏。幸运的是，本文提供了有关如何使用 JavaScript 和 React 为古腾堡编辑器创建简单块的综合指南。从设置环境到调试代码，本文将带您完成构建您自己的区块所需的每一步。此外，它还详细解释了与 JavaScript 和 React 相关的各种概念，例如代码结构、渲染函数和自定义属性。最后，它提供了示例来帮助您更好地理解使用 JavaScript 和 React 为古腾堡编辑器创建块的过程。

因此，如果您想学习如何使用 JavaScript 和 React 为 Gutenberg-editor 创建您自己的自定义块，那么这篇文章正是您所需要的！所以继续阅读以开始！

设置环境

在为 Gutenberg-Editor 创建块之前，您首先需要设置环境。这包括安装 Node.js、创建文件夹结构和创建 package.json 文件。此外，使用源代码编辑器（例如 Visual Studio Code 或 Sublime Text）可以帮助使编码变得更加轻松和高效。

安装 Node.js 是搭建环境的第一步。Node 提供了一个可以在服务器端安装包和执行 JavaScript 的环境。它还允许开发人员使用节点包管理器 (npm) 为他们的项目安装依赖项。要安装 Node，请打开系统的命令行并输入：“node -v”以检查它是否已安装；如果未安装，则键入“npm install node -g”开始安装过程。

创建用于存储项目文件的文件夹结构是设置环境的另一个重要步骤。在此结构中，创建一个“src”目录，用于存储项目的所有源文件，例如 JavaScript 和 React 文件。此外，您应该创建一个“构建”目录，其中将包含所有已编译的资产，这些资产稍后将在编辑器中注册您的块时使用。

创建 package.json 文件将使您能够在编辑器中注册您的块并运行 npm 命令。该文件包含有关您的项目的元数据，例如其名称、版本号以及开发和生产过程中所需的依赖项列表；将此信息输入到 package.json 文件对于运行 npm 命令和在编辑器中注册您的块是必要的。

使用 Visual Studio Code 或 Sublime Text 等源代码编辑器可以更轻松地处理 JavaScript 和 React 代码。这些编辑器提供了语法高亮和自动完成等功能，可以帮助开发人员编写代码并节省他们在开发过程中的时间；他们还具有调试功能，可以帮助识别代码中的错误并提高整体编码效率。

通过完成这些步骤，您已经成功地设置了使用 JavaScript 和 React 为 Gutenberg-Editor 创建一个简单块的环境！

创建一个基本块

为 Gutenberg 编辑器创建基本块的第一步是设置环境。这个过程可以使用 Node 和 npm 轻松完成，只要你有一个现有的 WordPress 安装并启用了 Gutenberg 插件。完成此步骤后，您可以继续在 JavaScript 文件中编写块的核心。该文件包含创建和注册块所需的所有代码。在这个文件中，您必须定义块的名称、类别和属性，WordPress 将使用这些来在编辑器中识别和分组块。

下一步是定义 edit() 方法，该方法确定在编辑块时出现在块中的内容。这涉及创建 React 组件，例如文本字段、图像或其他元素，以便用户在将块添加到他们的帖子或页面时可以配置它们。此外，您需要指定当有人发布包含您的块的帖子或页面时，WordPress 应如何保存和存储每个字段。

最后，您需要定义一个 save() 方法来确定您的块在发布时应如何保存。这涉及编写 HTML 标记以在网站或博客文章上正确显示您的内容，并确保所有用户定义的属性都正确存储在 WordPress 自定义字段中。在此阶段调试您的代码是必不可少的；它将使您能够在用户之前发现任何问题，从而节省时间并改善用户体验。

完成这些步骤后，您就成功地使用 JavaScript 和 React 为古腾堡编辑器创建了一个基本块！

在块编辑器中注册块

创建基本块后，必须在块编辑器中注册它，以便在创建帖子或页面时显示为可用选项。注册新块的步骤非常简单：第一步是使用 WordPress 的 wp-blocks 包中的 registerBlockType() 函数，并传入一些关于块的关键信息，如块的名称、标题以及是否它支持插入器或可重复使用的块。此外，此步骤还允许进行其他自定义，例如为块添加样式变体或在其设置页面上为用户输入提供自定义属性。此外，此步骤还应包括来自外部包（如 React）的任何相关组件，以便为您的定制块提供功能。

在为新块设置样式时，您可以通过内联样式或使用 WordPress 的 wp-blocks 包提供的预定义类名来包含 CSS 类。为了使您的块更加引人注目和有吸引力，您可以在插件目录中创建一个文件夹，其中包含任何外部 JavaScript 和 CSS 文件，这些文件用于使用自定义样式和效果来设置定制块的样式。此步骤是可选的，但可以帮助您的积木脱颖而出。

然而，在注册一个新块之前，重要的是要确保所有必需的组件都已包含在项目的 package.json 文件中，以便在运行 webpack 或在 WordPress 的管理屏幕中排队脚本时正确加载它们。一旦你检查了你的 package.json 文件并确保所有相关组件都已正确添加，你应该在古腾堡注册新块之前检查所有必要的注册参数是否已正确传递到 WordPress 的 wp-blocks 包的 registerBlockType() 函数中-编辑。这样做将有助于防止错误并在使用新创建的块创建帖子和页面时创建更顺畅的过程。

通过执行这些步骤，您现在应该已经在 Gutenberg 中成功注册了您自己的定制块，并准备好开始使用它构建令人兴奋的自定义内容！

调试代码

调试是为古腾堡编辑器创建 WordPress 插件的重要部分，因为它有助于识别可能出现的任何错误或不正确的结果。幸运的是，有许多工具可以帮助开发人员调试他们的代码。了解如何使用 Chrome DevTools 对于调试 JavaScript 和 React 代码至关重要，因为它允许开发人员在代码在浏览器中运行时对其进行监控，从而让他们深入了解代码中的任何潜在问题。此外，了解调试器可能产生的不同类型的错误和警告很重要，这样开发人员可以快速诊断和修复他们在代码中遇到的任何问题。

除了访问调试工具之外，还有一些有用的提示和技巧可以让您更轻松地使用 Gutenberg-editor 调试 WordPress 插件。例如，将代码分解成更小的部分并单独测试这些部分通常有助于查明任何错误或问题的根源。此外，查看现有的 WordPress 插件并查看这些插件的结构非常有益，因为它可以让开发人员很好地了解他们自己的插件应该是什么样子以及如何在必要时进行调试。

通过执行这些步骤并利用所有可用的工具来调试您的代码，您将能够轻松地为古腾堡编辑器创建一个可靠的 WordPress 插件。一旦识别并修复了所有错误，您就可以放心地继续操作，因为您知道您的插件将正常运行。通过一些实践和奉献精神，任何人都可以学习如何调试他们的代码并为古腾堡编辑器创建一个成功的 WordPress 插件。

解释 JavaScript 和 React 代码结构

JavaScript 和 React 代码结构是为古腾堡编辑器创建简单块的基础。了解 JavaScript 和 React 代码结构的基础知识对于创建成功的块至关重要。在编写 JavaScript 和 React 代码时，重要的是要记住保持代码的组织性和结构良好。这将使调试更容易，并确保您的代码正确交付。

在用 JavaScript 和 React 编写代码时，需要包含某些核心元素。这些包括导入语句、变量、组件、道具、JSX 标签、函数、类、状态对象、条件和循环。此外，为了在 JavaScript 和 React 中成功编写有效代码，必须理解某些关键概念，例如组件、道具和状态对象。

import 语句用于将其他文件或组件导入到当前文件中，以便可以使用它们。导入语句允许为导入的模块赋予更简单的名称，然后可以在整个脚本或应用程序中使用这些名称。变量允许存储数据，然后可以在整个脚本或组件中访问这些数据。组件是可重用的代码片段，代表网页上的特定元素。Props 允许在应用程序中将值从一个组件传递到另一个组件，从而允许组件以不同的值重用。JSX 标签是类似 HTML 的标签，在 React 中编写代码时使用它们代替 HTML 标签。函数是代码块，它们在被调用时执行特定任务，而类则充当通过共同主题相互关联的各种函数或方法的容器。状态对象包含可以随时间变化的数据，以便于通过应用程序或脚本中的用户交互进行更改。条件允许基于满足某些条件的不同结果，而循环允许代码部分重复运行，直到满足某些要求。

在使用 JavaScript 和 React 编写代码时，了解模块化编程的概念也很重要。模块化编程是一种将功能片段分解为更小的块或模块的方法，然后可以单独开发或测试这些块或模块，然后再将它们重新组合成一个完整的程序。这允许开发人员创建有效的结构，最大限度地减少重复并提高可读性以及任何项目代码库在其生命周期中的可维护性。

通过了解 JavaScript 和 React 的这些关键概念和元素，您将能够轻松地为古腾堡编辑器创建一个简单的块。您还会发现调试代码更容易

解释渲染函数

渲染函数是 React 代码结构的重要组成部分。它负责解释和显示 React 组件的输出。渲染函数由不同的组件组成，例如元素标签、类名和道具。element 标签用于定义将在您的块代码中使用的 HTML 元素的类型。className 元素标识目标 HTML 元素中的特定类。最后，props 元素在您的块代码中将数据从一个组件传递到另一个组件。

在编写渲染函数时，重要的是要考虑这些组件中的每一个将如何相互交互。例如，如果您的块中有一个按钮需要单击以执行操作，那么您将需要确保元素标记包含一个 href 属性，该属性将它链接到适当的 JavaScript 函数或操作。此外，您需要设置适当的 className 和 props，以便它们正确链接到您的块中所需的必要功能和操作。

渲染函数还允许自定义属性，这有助于将数据从一个组件传递到另一个组件。自定义属性在创建块时提供了灵活性，因为它们可用于调整或自定义块代码中的元素，例如字体大小、边距、填充等。要在渲染函数中使用自定义属性，您必须首先创建一个“道具”对象并使用“属性”键来存储您的块所需的所有自定义属性。

重要的是要注意，在您的块代码中使用自定义属性时，您必须确保它们的格式和验证正确，因为如果操作不正确，它们很容易导致错误。此外，当将自定义属性与渲染函数的其他组件（例如元素标签和类名）结合使用时，确保正确编写语法非常重要，以便该块在古腾堡编辑器的输出中显示时表现出预期的行为区域。

总之，在使用 JavaScript 和 React 代码结构为 Gutenberg-editor 创建块时，了解如何编写正确的渲染函数至关重要。本文概述了哪些组件构成渲染函数以及如何在其中使用自定义属性。此外，还提供了示例以帮助阐明所讨论的任何概念。

了解自定义属性

使用 JavaScript-React 为 Gutenberg-editor 创建 WordPress 插件时，了解自定义属性的使用很重要。自定义属性允许开发人员修改 React 组件的属性，而无需更改其标记或编码结构。通过了解自定义属性的语法和使用，开发人员可以更轻松、更高效地为 Gutenberg-editor 创建成功的块。

自定义属性主要有两种类型：props 和 state。Props 是不可变的，这意味着它们一旦设置就无法更改。它们通常用于将数据从一个组件传递到另一个组件，以及用于在页面加载时设置组件的初始值。例如，道具可用于定义输入字段中的占位符文本，或指定是否应启用按钮。另一方面，状态是可变的并且可以是动态的——它可以随着时间的推移而改变，以响应应用程序逻辑触发的用户操作或事件。例如，当用户点击按钮时，state 可用于存储有关应用程序当前状态的信息（例如，按钮是启用还是禁用）。

自定义属性提供了一种访问和修改块代码中数据的简便方法，使开发人员能够快速调整他们的块以适应不断变化的需求，而无需重写大部分代码。此外，当与生命周期方法等其他 React 功能相结合时，自定义属性使开发人员能够创建块，以动态响应应用程序环境中的不同用户交互或事件。这使得创建功能强大的块成为可能，这些块可以快速准确地响应用户输入，而不会影响性能或可用性。

总之，了解自定义属性的语法和使用是使用 JavaScript-React 为 Gutenberg-editor 创建成功块​​的重要部分。使用自定义属性，开发人员可以轻松访问和修改块中的数据，而无需重写大部分代码。此外，自定义属性使开发人员可以创建功能强大的块，这些块能够动态响应应用程序环境中的不同用户交互或事件。

例子

示例是学习如何应用本文中讨论的概念和技术的好方法。本节提供了几个示例，说明使用 JavaScript 和 React 为古腾堡编辑器创建简单块的不同方面。

第一个示例着重于如何在块组件的渲染函数中编写代码。它详细说明了需要使用哪些组件、它们应该如何构建以及它们的目的是什么。此外，它还解释了在渲染函数中使用 props 和自定义属性来实现所需的输出。

此块允许用户输入消息并上传图像。在edit函数中，它使用该RichText组件创建一个可编辑的消息字段，并使用一个MediaUpload组件上传图片。该attributes对象包含message和imageUrl属性，用于存储用户输入的数据。该setAttributes函数用于使用用户输入的新数据更新属性。

在save函数中，它使用一个div元素来显示消息和一个img元素来显示图像。用于向 div 元素添加一个类，className该类可用于样式设置。

该render函数用于在编辑器中显示块。与 RichText 组件一起使用的valueprop 用于将输入的文本绑定到 message 属性，onChangeprop 用于将 message 属性设置为输入的文本。该onClick道具用于在点击上传按钮时打开媒体库。该img元素具有src绑定到 imageUrl 属性的属性。该onChange道具用于在选择新图像时更新 imageUrl 属性。

该save函数用于在前端显示块，它使用message和imageUrl属性显示输入的文本和上传的图像。

 

下一个示例演示如何使用自定义属性为块组件设置不同的属性：

此块允许用户输入一些文本，选择该文本的字体大小和颜色。在edit函数中，它使用TextControl组件 from@wordpress/components创建三个文本字段供用户输入数据。该attributes对象包含text,fontSize和textColor属性，用于存储用户输入的数据。该setAttributes函数用于使用用户输入的新数据更新属性。

save函数，它使用一个元素div来显示文本，它使用style属性来设置文本的fontSize和color。和属性分别用于设置文本的字体大小和颜色fontSize。textColor

此块演示了如何使用自定义属性为块组件设置不同的属性。TextControl组件用于创建允许用户输入数据的文本字段，组件withState用于管理组件的状态。该setAttributes函数用于使用用户输入的新数据更新属性。

此块概述了哪些组件需要导入到块组件的文件中才能访问自定义属性，以及在通过属性自定义块组件时哪些属性可用。该示例使用来自and的TextControl,withState和registerBlockType组件。@wordpress/components@wordpress/blocks

 

这些示例将帮助您更有效地理解和应用本文中讨论的概念和技术。他们演示了使用 JavaScript 和 React 为 Gutenberg-editor 创建一个简单块需要采取的每个步骤。此外，它们对过程和结果都提供了清晰的解释和视觉效果，使您更容易快速准确地掌握这些概念。

结论

总之，使用 JavaScript 和 React 为古腾堡编辑器创建一个简单块的过程是一个有趣的挑战。通过周密的计划、对所涉及的不同概念和技术的理解，以及一些调试以微调它，可以创建一个可以定制的块来满足您的需求。通过本文，我们介绍了使用 JavaScript 和 React 为 Gutenberg 编辑器创建一个简单块并将其注册到编辑器中所需的步骤和概念。

首先，我们解释了如何设置环境以创建我们的块。然后我们使用 JavaScript 和 React 创建了一个基本块，讨论了如何将其注册到块编辑器中，然后如何调试它。之后，我们回顾了这个过程中使用的各种概念，例如 JavaScript 和 React 代码结构、渲染函数和自定义属性。

此外，我们详细介绍了每个步骤和概念，并提供了示例来帮助阐明它们。通过遵循这些步骤并更多地了解相关概念和技术，任何人都可以为他们的 WordPress 网站创建自定义块。最终，当您完成此任务时，您将拥有可以引以为豪的东西。

总之，使用 JavaScript 和 React 为古腾堡编辑器创建一个简单的块并不像看起来那么困难！通过了解 JavaScript 和 React 代码结构和渲染函数等基础知识，以及了解自定义属性，您可以自信地创建一个基本块，在块编辑器中注册它，并调试代码。在本文的帮助下，您现在可以开始为 Gutenberg 编辑器创建您自己的简单块，并制作您自己的独特内容！